<template>
  <div>
    <p>{{title}}</p>
    <button @click="title ='Vue3 lifeCycle'"></button>
  </div>
</template>

<script >
  import {onBeforeMount, onMounted, onUpdated, onBeforeUnmount, onUnmounted, onBeforeUpdate} from 'vue';
  export default {
    name: 'Demo',
    data() {
      return {
        title: 'Vue3 demo'
      }
    },
    // 等与 beforeCreate 和 created
    setup() {
      onBeforeMount( ()=> {console.log(`onBeforeMount`)})
      onMounted(() => {console.log(`onMounted`)})
      onBeforeUpdate(() => {console.log(`onBeforeUpdate`)})
      onUpdated(() =>{console.log(`onUpdated`)})
      onBeforeUnmount(() => {console.log(`onBeforeUnmount`)})
      onUnmounted(() => {console.log(`onUnmounted`)})
    },
    beforeCreate() {
      console.log(`beforeCreate`);
    },
    created() {
      console.log(`created`);
    },
    beforeMount() {
      console.log(`beforeMount`);
    },
    mounted() {
      console.log(`mounted`);
    },
    beforeUpdate() {
      console.log(`beforeUpdate`);
    },
    updated() {
      console.log(`updated`);
    },
    beforeUnmount(){
      console.log(`beforeUnmount`);
    },
    unmounted() {
      console.log(`unmounted`);
    },
  }
</script>

<style scoped>

</style>